<template>
  <div>
    <a-drawer title="编辑调薪提醒" placement="right" :closable="false" destroyOnClose @close="onClose" :visible="visible" :width="540">
      <a-form :form="form">
        <div class="form_item_box">
          <a-form-item label="提醒名称" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
            <a-input
              v-decorator="[
                'msg',
                {
                  rules: [{ required: true, message: '请填写提醒名称' }]
                }
              ]"
            />
          </a-form-item>
          <a-form-item label="提醒时间" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
            <a-input style="border:0" disabled defaultValue="完成调薪工作,立即出发提醒" />
          </a-form-item>
          <a-form-item label="适用范围" :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }">
            <a-tag color="#6A66F6">orange</a-tag>
            <a-tag color="#6A66F6">orange</a-tag>
            <a-button icon="plus" @click="showChildrenDrawer">
              添加适用部门或员工
            </a-button>
          </a-form-item>
        </div>
        <div class="form_item_box">
          <!-- 提醒方式 -->
          <a-form-item label="提醒方式" :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }">
            <a-checkbox-group @change="onChangeCheckboxGroup">
              <a-row>
                <a-checkbox value="A">短信</a-checkbox>
                <a-checkbox value="C">邮件</a-checkbox>
              </a-row>
            </a-checkbox-group>
          </a-form-item>
          <!-- 通知人 -->
          <a-form-item label="通知人" :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }">
            <a-tag color="#6A66F6">orange</a-tag>
            <a-tag color="#6A66F6">orange</a-tag>
            <a-button icon="plus" @click="showChildrenDrawer">
              添加通知人
            </a-button>
          </a-form-item>
        </div>
        <a-form-item label="模板类型" :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }">
          <a-radio-group @change="onChange" v-model="value">
            <a-radio-button value="a">员工本人邮件模板</a-radio-button>
            <a-radio-button value="b">管理类者邮件模板</a-radio-button>
            <a-radio-button value="c">短信模板</a-radio-button>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="邮件主题" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
          <a-input
            v-decorator="[
              'msg2',
              {
                rules: [{ required: true, message: '请填写提醒主题' }]
              }
            ]"
          ></a-input>
        </a-form-item>
      </a-form>
      <!-- 子弹窗 -->
      <a-modal title="添加部门或员工" v-model="childrenDrawer" :visible="childrenDrawer" @ok="handleOk" @cancel="handleOk" :footer="null">
        <p>aaa</p>
      </a-modal>
      <footer class="footer">
        <a-button class="btn_bag" @click="addSave">保存</a-button>
        <a-button @click="onClose">取消</a-button>
      </footer>
    </a-drawer>
  </div>
</template>

<script>
export default {
  props: {
    msgOptions: {
      type: Object,
      default: () => ({
        show: false,
        data: []
      })
    }
  },
  data() {
    return {
      // 选择的模板
      value: "a",
      childrenDrawer: false,
      visible: false,
      form: this.$form.createForm(this, { name: "mesageForm" })
    };
  },

  watch: {
    msgOptions: {
      handler() {
        return (this.visible = this.msgOptions.show);
      }
    }
  },

  methods: {
    // 关闭弹窗
    onClose() {
      this.visible = false;
    },
    // 提交弹窗
    addSave() {
      // 提交验证
      this.form.validateFields((err, values) => {
        console.log("debug log --> ", err);
      });
    },
    // 选择验证
    handleSelectChange(value) {
      this.form.setFieldsValue({
        note: `Hi, ${value === "male" ? "man" : "lady"}!`
      });
    },
    // 添加部门或成员
    showChildrenDrawer() {
      this.childrenDrawer = true;
    },
    // 关闭添加部门或弹窗
    handleOk() {
      this.childrenDrawer = false;
    },
    // 提醒方式
    onChangeCheckboxGroup(checkedValues) {},
    // 选择模板
    onChange() {}
  }
};
</script>
<style lang="scss" scoped>
@import "@/styles/coder.scss";

.form_item_box {
  padding-bottom: 1px;
  margin-bottom: 20px;
  box-shadow: 0px 1px 0px 0px rgba(232, 232, 232, 1);
}
.footer {
  width: 500px;
  box-shadow: 0px -1px 0px 0px rgba(232, 232, 232, 1);
  height: 68px;
  line-height: 68px;
  text-align: center;
}
.ant-radio-button-wrapper-checked {
  color: $orange;
  border: 1px solid $orange !important;
}
.ant-radio-button-wrapper {
  margin-right: 20px !important;
}
</style>
